<template>
<div class="containerOne">


    <!-- 顶部内容 -->
    <div class="Headerwrap">

      <!-- 顶部header -->
      <div class="cityHeader">
          <van-icon name="arrow-left" class="icon" @click="$router.push('/home')"/>
          <h3 class="title">城市选择</h3>
      </div>


      <!-- 搜索框 -->
      <div class="searchWrap">
        <van-search
          shape="round"
          background="lightskyblue"
          placeholder="请输入城市名或者拼音"
        />
      </div>

    </div>


    <!-- 字母排序 -->
    <div class="zimuWrap">
        <ul class="list">

          <li
            class="item"
            v-for="item in cityZimuList"
            :key="item"
            :ref="item"
            @click="letterClick"
            @touchstart="touchStart"
            @touchmove="touchMove"
            @touchend="touchEnd"

          >
            {{item}}
          </li>

        </ul>
    </div>


    <!-- 城市选择列表 -->
    <city-list @sendList="sendList" :sendCityLetter="sendCityLetter"></city-list>
    



</div>
</template>

<script>

   import cityList  from "@/components/cityList.vue"

export default {
    data() {
        return {
           cityZimu:{},//城市字母列表--cities
           sendCityLetter:"",//发送给子组件的数据，单个的城市字母

           touchStatus:false,//是否点击字母
          
           startY:0

        };
    },

    // 数据更新完毕，且页面完成渲染之后触发的事件
    updata(){
      this.startY = this.$refs['A'][0].offsetTop
    },

    methods: {

      //发送字母
       sendList(e){
         this.cityZimu = e
       },

      //点击字母跳转城市名称首字母
       letterClick(e){
        //  console.log(e.target.innerText);
        this.sendCityLetter = e.target.innerText
        // this.$emit("sendCityLetter",e.target.innerText)
         
       },

      //点击字母表时的事件
      touchStart(){
        this.touchStatus = true
        
      },

      touchMove(e){
          
        if(this.touchStatus){

         const touchY = e.touches[0].clientY-180//指针位置到窗口的距离
         //字母下标等于 指针位置 减去 字母距离，最后除以每个字母的高度
         const index = Math.floor((touchY-this.startY)/20)//字母下标
        
         if(index>=0 && this.cityZimuList.length ){
            // this.$emit("changeLetters",this.cityZimuList[index])
            this.sendCityLetter = this.cityZimuList[index]
         }

        }


      },

      touchEnd(){
        this.touchStatus = false
        
      }




    },

    computed:{
      cityZimuList() {
        const letters = []
        for(let i in this.cityZimu){
          letters.push(i)
        }
        return letters

      }


    },


    created(){
      this.sendList()
    },

    components:{
        cityList
    }


    }
</script>


<style scoped lang="less">

.containerOne{

  .Headerwrap{
    width: 100%;
    position: fixed;
    position: absolute;
    top:0;
    left:0;
    

    .cityHeader{
      background-color:lightskyblue;
      display: flex;
      height: 10.667vw;
      

      .icon{
        font-size:30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .title{
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-left:-4vw;
      }
    }


  }


  .zimuWrap{
    height: 100%;

      .list{
        //  padding-top: 100px;
      position: fixed;

      top: 26%;
      right: 1.333vw;
      text-align: center;
      flex-direction: column;
      justify-content: center;
      align-items: center;

        .item{
          padding: 0.32vw 0;
        }
    }
  }

    
}
  
   

</style>